<template>
<div class="MSPbots">
<!--  <create-notice-switch-->
<!--      v-model="mspbots.popupNotification"-->
<!--      title="MSPbots Popup"-->
<!--      describe="This notification will appear at the top as Popup box when the user login MSPbots.">-->
<!--  </create-notice-switch>-->
<!--  <create-notice-switch-->
<!--      v-model="mspbots.webMessageNotification"-->
<!--      title="Web Message"-->
<!--      describe="This notification will pop up from the top right when the user login MSPbots.">-->
<!--  </create-notice-switch>-->
<!--  <create-notice-switch-->
<!--      v-model="mspbots.bellNotification"-->
<!--      title="MSPbots Bell"-->
<!--      describe="This notification will appear inside a bell in the navigation bar. Users can click on it at any time to view.">-->
<!--  </create-notice-switch>-->
  <el-form :model="mspForm" label-position="top" size="small" ref="form" :rules="mspFormRule">
    <el-form-item label="What content you want to send" class="fontBold"></el-form-item>
    <el-form-item prop="send.bannerNotification">
      <create-notice-switch
          v-model="mspForm.send.bannerNotification"
          title="MSPbots Banner"
          describe="This notification will appear as a banner at the top when the user login MSPbots.">
      </create-notice-switch>
    </el-form-item>
    <el-form-item label="Title" prop="bannerTitle">
      <el-input v-model="mspForm.bannerTitle"></el-input>
    </el-form-item>
    <el-form-item prop="bannerContent">
<!--      <quill-editor  v-model="mspForm.bannerContent" :options="options"></quill-editor>-->
      <ZTinymce v-model="mspForm.bannerContent" :height="50" v-if="dialogVisible"/>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
import createNoticeSwitch from "@/views/modules/mspbots/notification-setting/create-notice/components/create-notice-switch.vue";
import ZTinymce from '@/components/storybook/z-tinymce/index.vue'
export default {
  name: "send-MSPbots",
  props: ['dialogVisible'],
  components: {
    createNoticeSwitch,
    ZTinymce
  },
  data () {
    return {
      options: {
        modules: {
          // toolbar: '#toolbar'
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            ['link'],
            [{ 'align': [] }],

            ['clean'],                       // link and image, video
          ]
        }
      },
      mspForm: {
        bannerTitle: '',
        bannerContent: '',
        send: {
          bannerNotification: false,
          popupNotification: false,
          webMessageNotification: false,
          bellNotification: false
        }
      },
      mspFormRule: {
        bannerTitle: [
          { required: true, message: 'Please Enter', trigger: 'blur' },
        ],
        bannerContent: [
          { required: true, message: 'Please Enter', trigger: 'blur' },
        ],
        'send.bannerNotification': [
          { required: true, message: 'Please Select', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    async submit () {
      const validate = await this.$refs.form.validate()
      if (validate) {
        let params = {
          bannerTitle: this.mspForm.bannerTitle,
          bannerContent: this.mspForm.bannerContent,
        }
        Object.keys(this.mspForm.send).map(item => {
          params[item] = this.mspForm.send[item]
        })
        return params
      } else {
        return false
      }
    }
  }
}
</script>

<style scoped>
.MSPbots {
}
.fontBold ::v-deep .el-form-item__label {
  font-weight: bold;
}
</style>